import React, { useState } from 'react'
import OperationSubStyle from './operationsub.module.css'
import {ReactComponent as ResIcon} from '../../../assets/icon/刷新.svg'
import {Input,Button,Modal,Table} from 'antd'
const {Search}=Input
function OperationSubPages() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const onSearch = (value, _e, info) => console.log(info?.source, value);
  const colums=[
    {
      key:"1",
      dataIndex:"分期编号",
      title:"分期编号",
      align:"center"
    },{
      key:"2",
      dataIndex:"子项目编号",
      title:"子项目编号",
      align:"center"
    },{
      key:"3",
      dataIndex:"合同编号",
      title:"合同编号",
      align:"center"
    },{
      key:"4",
      dataIndex:"合同名称",
      title:"合同名称",
      align:"center"
    },{
      key:"5",
      dataIndex:"产品编码",
      title:"产品编码",
      align:"center"
    },{
      key:"6",
      dataIndex:"产品名称",
      title:"产品名称",
      align:"center"
    },{
      key:"7",
      dataIndex:"运营经理",
      title:"运营经理",
      align:"center"
    },{
      key:"8",
      dataIndex:"分期金额",
      title:"分期金额",
      align:"center"
    },{
      key:"9",
      dataIndex:"外包金额",
      title:"外包金额",
      align:"center"
    },{
      key:"10",
      dataIndex:"生产外包",
      title:"生产外包",
      align:"center"
    },{
      key:"11",
      dataIndex:"样本个数",
      title:"样本个数",
      align:"center"
    },{
      key:"12",
      dataIndex:"周期(自然日)",
      title:"周期(自然日)",
      align:"center"
    },{
      key:"13",
      dataIndex:"样本类型",
      title:"样本类型",
      align:"center"
    },{
      key:"14",
      dataIndex:"外包款来源",
      title:"外包款来源",
      align:"center"
    },{
      key:"15",
      dataIndex:"外包是否已打款",
      title:"外包是否已打款",
      align:"center"
    },{
      key:"16",
      dataIndex:"生信负责人",
      title:"生信负责人",
      align:"center"
    },{
      key:"17",
      dataIndex:"分析内容",
      title:"分析内容",
      align:"center"
    },{
      key:"18",
      dataIndex:"是否需要返样",
      title:"是否需要返样",
      align:"center"
    },{
      key:"19",
      dataIndex:"到样时间",
      title:"到样时间",
      align:"center"
    },{
      key:"20",
      dataIndex:"项目启动时间",
      title:"项目启动时间",
      align:"center"
    },{
      key:"21",
      dataIndex:"进展阶段",
      title:"进展阶段",
      align:"center"
    },{
      key:"22",
      dataIndex:"进展明细",
      title:"进展明细",
      align:"center"
    },{
      key:"23",
      dataIndex:"结算时间",
      title:"结算时间",
      align:"center"
    },{
      key:"24",
      dataIndex:"结算年份",
      title:"结算年份",
      align:"center"
    },{
      key:"25",
      dataIndex:"结算月份",
      title:"结算月份",
      align:"center"
    },{
      key:"26",
      dataIndex:"预结算金额",
      title:"预结算金额",
      align:"center"
    },{
      key:"27",
      dataIndex:"回款金额",
      title:"回款金额",
      align:"center"
    },{
      key:"28",
      dataIndex:"应收金额",
      title:"应收金额",
      align:"center"
    },{
      key:"29",
      dataIndex:"客户姓名",
      title:"客户姓名",
      align:"center"
    },{
      key:"30",
      dataIndex:"客户电话",
      title:"客户电话",
      align:"center"
    },{
      key:"31",
      dataIndex:"客户邮箱",
      title:"客户邮箱",
      align:"center"
    },{
      key:"32",
      dataIndex:"备注",
      title:"备注",
      align:"center"
    },{
      key:"33",
      dataIndex:"样本信息单附件",
      title:"样本信息单附件",
      align:"center"
    },{
      key:"34",
      dataIndex:"质检报告附件",
      title:"质检报告附件",
      align:"center"
    },{
      key:"35",
      dataIndex:"信息搜集表",
      title:"信息搜集表",
      align:"center"
    },{
      key:"36",
      dataIndex:"本地数据存放位置",
      title:"本地数据存放位置",
      align:"center"
    },{
      key:"37",
      dataIndex:"数据释放内容",
      title:"数据释放内容",
      align:"center"
    },{
      key:"38",
      dataIndex:"释放时间",
      title:"释放时间",
      align:"center"
    },{
      key:"39",
      dataIndex:"结算确认截图",
      title:"结算确认截图",
      align:"center"
    },{
      key:"40",
      dataIndex:"备注",
      title:"备注",
      align:"center"
    }
  ]
  return (
    <div className={OperationSubStyle.OperationSub_app}>
       <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
      <div className={OperationSubStyle.OperationSub_Table_form}>
        <Search
          placeholder="input search text"
          onSearch={onSearch}
          style={{
            width: 200,
            marginRight: "10px",
          }}
        />
        <Button style={{ marginRight: "10px" }}
        onClick={showModal}
        >新增</Button>
        <Button style={{ display: "flex", alignItems: "center" }}>
          <ResIcon width={25} />
          <span style={{ margin: "0 5px" }}>重置</span>
        </Button>
      </div>
      <Table columns={colums} bordered='true' scroll={{
        x:4000
      }}/>
    </div>
  )
}

export default OperationSubPages
